<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>
    <div class="container">
        <div class="control1">
            <button>选项4</button>
            <button>选项5</button>
            <button>选项6</button>
        </div>
        <div class="content">
            <div class="box1">内容4</div>
            <div class="box1">内容5</div>
            <div class="box1">内容6</div>
        </div>
    </div>
    <script>
        // 定义构造函数来承载数据
        function Tab(btn_selector, box_selector) {
            this.btns = document.querySelectorAll(btn_selector);
            this.boxs = document.querySelectorAll(box_selector);
            this.index = 0
            this.change()
            this.event();
        }
        // 算法（给每一个btn绑定点击事件）
        Tab.prototype.event = function () {
            var self = this;
            for (var i = 0; i < self.btns.length; i++) {
                self.btns[i].index = i
                self.btns[i].onclick = function () {
                    console.log(1);
                    self.index = this.index;
                    self.change();

                }
            }
        }
        // 算法（当点击到btns的哪一个时对应的boxs显示）
        Tab.prototype.change = function () {
            var self = this;
            for (var j = 0; j < self.boxs.length; j++) {
                self.boxs[j].style.display = "none"
            }
            self.boxs[self.index].style.display = "block"
        }
        // new一个实例
        var tab1 = new Tab(".control button" , ".box")
        var tab2 = new Tab(".control1 button" , ".box1")
    </script>
</body>

</html>